<template>
    <div class="boss">
        <div class="logo">
            <router-link  to="/report">
              <img src="../assets/logo.png" style="max-width: 116px;float: left;" /> 
            </router-link>
            <div style="float:left ;">
                <span style="color:#00BAFF;font-size:24px;line-height: 48px;">JT808-1078部标平台</span>
            </div>
        </div>
        
        <div class="boxs">
                        <el-menu
                            mode="horizontal"
                            background-color=#000
                            text-color="#fff"
                            :default-active="$route.path"
                            >
                         <!-- 数据报表 -->
                        <el-menu-item index="/report" class="el-menu-item1">
                            <router-link   active-class="active" to="/report">
                                数据报表
                            </router-link>
                        </el-menu-item>
                        <!-- 轨迹回放 -->
                        <el-menu-item index="/trackPlayback" class="el-menu-item2" >
                            <router-link   active-class="active" to="/trackPlayback">
                              轨迹回放
                            </router-link>
                        </el-menu-item>
                        <!-- 管理中心 -->
                        <el-menu-item index="/Control" class="el-menu-item3" >
                            <router-link  active-class="active" to="/Control">
                              管理中心
                            </router-link>
                        </el-menu-item>
                        <!-- 视频监控 -->
                        <el-sub-menu index="/rtvs" class="el-menu-item4 ">
                            <template #title >
                                <div  class="title" >视频监控</div>
                            </template>
                            <el-menu-item index="/rtvsReal" style="inset:-6px auto auto 0px ;">
                                <router-link   target="_blank" to="/rtvsReal" >
                                    车辆实时视频
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="/rtvsBack" style="inset:-6px auto auto 0px ;">
                                <router-link  target="_blank" to="/rtvsBack" >
                                    车辆回放视频
                                </router-link>
                            </el-menu-item>
                           
                        </el-sub-menu>
                        <el-sub-menu index="5" class="el-menu-item5">
                            <template #title>
                                <img src="../assets/name.png" style="height: 30px;border-radius: 50%;float: left; width: 30px; vertical-align: center;"/>
                                <div style="font-size: 18px;">{{ name }}</div>
                            </template>
                            <el-menu-item index="5-1"  style="padding-left:1vw;font-size: 18px;inset:-6px auto auto 0px ;" @click="logout" >
                                <router-link  to="">
                                    退出登陆
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="5-2"  style="padding-left:1vw;font-size: 18px;inset:-6px auto auto 0px ;" @click="logout" >
                                <router-link  target="_blank"  to="">
                                    切换国标平台
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="5-2"  style="padding-left:1vw;font-size: 18px;inset:-6px auto auto 0px ;"  >
                               <a  target="_blank" href="/swagger-ui/">
                                    部标在线文档
                               </a>
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </div>
        <div>
            <div style=" position: absolute;width: 23%;height: 5px;margin-left:-18px;background-color: #00BAFF;transform: skew(107deg); z-index: 9999;"></div>
        </div>
    </div>
</template>

<script>


export default {
    name: "Customize_head",
    mounted() {
        this.name=localStorage.getItem("name")
    },
    data: function () {
        return {
            name:''
        }
    },
        methods:{
            logout: function () {
                // 清除缓存等操作
                    localStorage.removeItem('token');
                    this.$router.replace({
                        path:"/" 
                    })
            },


        }
}



</script>

<style scoped>
.el-menu-item a{
   
   font-size: 18px;
   text-decoration: none;
  
}
.el-menu--popup .el-menu-item a{
    color: #fff;
   font-size: 18px;
   text-decoration: none;
  
}
.el-sub-menu a{
   
    font-size: 18px;
    text-decoration: none;
}
.title{
    font-size: 18px;
    
}
.title:hover{
    color:#00BAFF;
}
.boss{
    width: 100vw;
    height:48px;
    text-align: center;
    border-bottom: #00BAFF solid 1px;
    border-top: #00BAFF solid 2px;
    position: relative;
    background-color: #000;
}
.logo{
    float: left;
   
    background-color: #000;
}
.el-popper.is-light{
    border: none;
}
.boxs {
    margin-left: 17vw;
}
.el-menu-item {
 height: 48px;

}

.el-sub-menu .el-menu-item{
    height: 48px;
}

.el-menu--horizontal>.el-menu-item.is-active {
    color:#00BAFF;
	background: linear-gradient(180deg,rgba(251,206,109,0) 0%,rgb(0, 186, 255, 0.54) 100%);
    border-bottom: 0px solid transparent;
}



.el-menu-item a:hover{
    color:#00BAFF;
}


.content {
    margin-left: 10%;
    text-align: center;
}
.el-menu{
  border: none;
}
.el-menu-item1{
    margin-left: 7%;
    
}
.el-menu-item2{
    margin-left: 8%;
    
   
}
.el-menu-item3{
    margin-left: 8%;

   
}
.el-menu-item4{
    margin-left: 8%;
    height: 48px;
  
}
.el-menu-item5{
    float: right;
    margin-left: 28%;
    height: 48px;
  
}
</style>
